#!/bin/bash

		create_html_css(){
			echo -e '<html>
			<head>
			<style type="text/css">
			body        {font:14px Courier New,Helvetica,sansserif; color:black; background:White; margin-left: 11px;}
			table {font:14px Courier New,Helvetica,sansserif; color:Black; background:#FFFFCC; table-layout: fixed; cborder: 1px solid #000000; border-collapse: collapse; }
			tr {font:14px Courier New,Helvetica,sansserif; color:Black; background:#FFFFCC;}
			td {font:14px Courier New,Helvetica,sansserif; color:Black; background:#FFFFCC; padding: 5;word-break: break-all;}
			th          {font:bold 16px Courier New,Helvetica,sansserif; color:White; background:#3366FF; padding:0px 0px 0px 0px;border: 1px solid #000000;}
			h2          {font:bold 18pt Courier New,Helvetica,sansserif; color: Black; padding:0px 0px 0px 0px;}
			h1          {font:bold 20pt Courier New,Helvetica,sansserif; color: #0066CC; padding:0px 0px 0px 0px;width:72% ;text-align:center;}
			.NORMAL {display: none;}

			html,body{
				scroll-behavior: smooth;
				margin: 0px;
				/*overflow: auto;*/
			}

			h3 {
				color: #F77A0B;
				font-size: 1.5em;
				display: block;
				margin-block-start: 1em;
				margin-block-end: 1em;
				margin-inline-start: 0px;
				margin-inline-end: 0px;
				font-weight: bold;
			}

			h5 {
				display: block;
				font-size: 0.83em;
				margin-block-start: 1.67em;
				margin-block-end: 1.67em;
				margin-inline-start: 0px;
				margin-inline-end: 0px;
				font-weight: bold;
			}

			.foldbtn {
				font-weight: bold;
				position: relative;
				clear: both;
				background: #F88825;
				line-height: 12px;
				border-radius: 4px;
				color:  #fff;
				cursor: pointer;
				text-align: center;
				width: 590px;
				margin-top: 5px;
				padding: 5px 0;
			}

			.detail_wrapper {
				display: flex;
				margin: 8px auto;
				/*width: 800px;*/
				overflow: hidden;
				border-radius: 8px;
				padding: 8px ;
				/*box-shadow: 5px 5px 12px #bebebe, -5px -5px 12px #ffffff;*/
			}

			.detail_text {
				white-space: pre;
				word-break:break-all;
				flex-direction:row-reverse;
				justify-content:space-between;
				/*      display: -webkit-box;
				-webkit-line-clamp: 5;
				-webkit-box-orient: vertical;*/
				width: 100%;
				position: relative;
				line-height: 1.2;
			}
			.detail_text::before {
				content: ""; /* 这行很重要 */
				float: right;
				height: calc(100% - 171px);
			}
			.detail_text::after {
				position: absolute;
			}
			.detail_btn {
				position: relative;
				float: right;
				clear: both;
				margin-left: 20px;
				margin-top: 10em;
				padding: 0 8px;
				background: #3F51B5;
				line-height: 24px;
				border-radius: 4px;
				color:  #fff;
				cursor: pointer;
			}
			.detail_btn::before {
				content: "...";
				position: absolute;
				left: -5px;
				color: #333;
				transform: translateX(-100%)
			}
			.detail_btn::after{
				content:"展开"
			}

			.detail_exp{
				display: none;
			}
			.detail_exp:checked+.detail_text{
				max-height: none;
			}
			.detail_exp:checked+.detail_text::after{
				visibility: hidden;
			}
			.detail_exp:checked+.detail_text .detail_btn::after{
				content: "折叠"
			}
			.detail_exp:checked+.detail_text .detail_btn::before {
				visibility: hidden; /*在展开状态下隐藏省略号*/
			}
			.suggest {
				padding: 6px;
			}

			.table_foldbtn {
				text-decoration: none;
				color: #fff;
				display: inherit;
			}

			.table_foldbtn:link {
				text-decoration: none;
				color: #fff;
			}



			/*suggest*/
			.panel {
				margin-bottom: 20px;
				background-color: #ffffff;
				border: 1px solid transparent;
				border-radius: 4px;
				width: 94%;
				-webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
				box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
			}
			.panel-warning {
				border-color: #FFEDCA;
				background-color: #FFEDCA;
			}

			.panel-heading {
				border-bottom: 10px solid transparent;
				padding: 0px 0px;
				padding-left: 10px;
				border-top-right-radius: 3px;
				border-top-left-radius: 3px;
			}
			.panel-body {
				padding: 5px 15px 15px 15px;
			}
			.panel-warning > .panel-heading {
				color: #ffffff;
				background-color: #F1B37A;
				border-color: #FFEDCA;
			}
			.panel-title {
				margin-top: 0 !important;
				margin-bottom: 0 !important;
				font-size: 18px !important;
				color: inherit;
			}

			.fa {
				display: inline-block;
				font: normal normal normal 14px/1 FontAwesome;
				font-size: inherit;
				text-rendering: auto;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}

			.scroll_to_top {
				position: sticky;
				float: right;
				top: -150px;
				margin-top: -50px;
				margin-right: 25px;
				border-radius: 50%;
				background: url("data:image/svg+xml,%3Csvg%20t%3D%221678171580860%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%221059%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M540.928%20309.504l-30.165333-30.20799999-415.957334%20415.82933299a42.837333%2042.837333%200%200%200-1e-8%2060.288%2042.538667%2042.538667%200%200%200%2060.33066701%200.042667l355.541333-355.413333%20355.242667%20355.413333a42.496%2042.496%200%200%200%2060.288%200%2042.837333%2042.837333%200%200%200%200.085333-60.33066699l-383.701333-383.87200002-1.706667-1.74933299z%22%20fill%3D%22%233D3D3D%22%20p-id%3D%221060%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center no-repeat rgb(255,255,204);
				background-size: 50%;
				width: 45px;
				height: 45px;
				transform: translateY(calc(100vh + 50px));
			}


			.scroll_to_top:hover {
				background-color: #efefb8;
			}

			:root {
				--color-menu-bg: #fff;
				--font-color-mi: #000;
				--font-color-mi-hover: #3f51b5;
				--color-bg-mi-hover: #ececec;
				--border-radius-mi: 2px;
				--transition-menu-time: 0.2s;
				--color-line-bg: #d3d3d3;
			}

			.main-content {
				background-color: #e7e7e7;
				min-height: 100vh;
				overflow: hidden;
			}


			.content-box {
				height: 100%;
				overflow: auto;
				padding-left: 35px;
				text-overflow: ellipsis;
			}

			.menu-box {
				height: 100%;
				overflow: auto;
				float: left;
				letter-spacing: 0.5px;
				font-weight: 600;
				position: relative;
				width: fit-content;
				min-height: 100vh;
				padding: 6px 12px;
				box-sizing: border-box;
				background-color: var(--color-menu-bg);
			}

			.menu-box input[type='checkbox'] {
				display: none;
			}

			.menu-box>label {
				position: absolute;
				top: 48%;
				right: 0;
				transform: translateX(50%);
				width: 20px;
				height: 20px;
				border-radius: 20px;
				box-shadow: 0px 0px 4px 0px #000;
				background-color: var(--color-menu-bg);
				color: var(--font-color-mi);
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;
			}

			.menu-box>label>i {
				font-weight: 900;
				text-indent: -3px;
				font-size: 20px;
				transition: transform var(--transition-menu-time);
				transform: rotate(90deg);
			}

			.menu-box>label:hover {
				box-shadow: 0px 0px 2px 0px #000;
				color: var(--font-color-mi-hover);
			}

			.menu-box>input#menu-btn:checked+label>i {
				margin-left: 4px;
				transform: rotate(270deg);
			}

			.menu {
				width: 220;
				min-height: 100%;
				cursor: pointer;
				overflow: hidden;
				transition: width var(--transition-menu-time);
				color: var(--font-color-mi);
			}

			.menu-box>input#menu-btn:checked~.menu {
				width: 0;
			}

			.menu-title {
				text-align: center;
				margin: 10px 0;
				font-size: 25px;
			}

			.menu-item>label{
				position: relative;
				width: 100%;
				height: 50px;
				border-radius: var(--border-radius-mi);
				display: flex;
				align-items: center;
			}

			.menu-item>label:hover {
				color: var(--font-color-mi-hover);
			}

			.menu-item>label>i:first-child {
				flex: none;
				margin-right: 6px;
				font-size: 24px;
			}

			.menu-item>label>span {
				flex: 1;
			}

			.menu-item>label>i:last-child {
				flex: none;
				font-size: 20px;
				font-weight: 900;
				transform: rotate(0deg);
				transition: transform var(--transition-menu-time);
			}

			.menu-item>input:checked+label>i:last-child {
				transform: rotate(180deg);
			}

			.menu-content {
				height: 0;
				padding-left: 17px;
				overflow: hidden;
				transition: height var(--transition-menu-time);
				display: flex;
				flex-wrap: wrap;
				background-color: var(--color-menu-bg);
			}

			.menu-content>span {
				width: 100%;
				text-indent: 20px;
				line-height: 40px;
				border-radius: var(--border-radius-mi);
			}

			.menu-content>span:hover {
				background-color: var(--color-bg-mi-hover);
				color: var(--font-color-mi-hover);
			}

			.one-level-span {
				font-size: 20px;
				color:  rgb(247, 122, 11);
			}



			.menu_href {
				text-decoration: none;
				color: #000;
				font-size: 15;
				display: block;
			}

			.menu_href:link {
				text-decoration: none;
				color: #000;
			}

			.menu_href:visited {
				text-decoration: none;
				color: #000;
			}

			.menu_href:hover {
				text-decoration: none;
				color: var(--font-color-mi-hover);
			}
			.menu_href:active {
				text-decoration: none;
				color: #000;
			}
			.icon-suggestion {
				width: 20px;
				height: 20px;
				background-size: 100%;
				background-position: center top;
				background-repeat: no-repeat;
				float: left;
				margin-right: 3px;
#				background-image: url('data:image/svg+xml,%3Csvg%20t%3D%221678157596202%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%22942%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M184%20342.4h161.5V598H184c-13.5%200-24.4-10.9-24.4-24.4V366.8c0-13.5%2011-24.4%2024.4-24.4z%22%20fill%3D%22%23F4CE26%22%20p-id%3D%22943%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M369.9%20622.4H184c-26.9%200-48.8-21.9-48.8-48.8V366.8c0-26.9%2021.9-48.8%2048.8-48.8h185.9v304.4zM184%20366.8v206.8h137.1V366.8H184z%22%20fill%3D%22%23333333%22%20p-id%3D%22944%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M692.9%20388.9h-68.6v185.9h68.6c13.5%200%2024.4-10.9%2024.4-24.4V413.3c0-13.5-10.9-24.4-24.4-24.4z%22%20fill%3D%22%23F4CE26%22%20p-id%3D%22945%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M692.9%20599.2h-93V364.5h93c26.9%200%2048.8%2021.9%2048.8%2048.8v137.1c0%2026.9-21.8%2048.8-48.8%2048.8z%20m-44.1-48.8H693V413.3h-44.2v137.1zM810.3%20458.6h46.5c12.8%200%2023.2%2010.4%2023.2%2023.2%200%2012.8-10.4%2023.2-23.2%2023.2h-46.5c-12.8%200-23.2-10.4-23.2-23.2%200-12.8%2010.4-23.2%2023.2-23.2zM825%20577.9l40.2%2023.2c11.1%206.4%2014.9%2020.6%208.5%2031.7-6.4%2011.1-20.6%2014.9-31.7%208.5l-40.2-23.2c-11.1-6.4-14.9-20.6-8.5-31.7%206.4-11.1%2020.6-14.9%2031.7-8.5zM801.8%20345.5l40.2-23.2c11.1-6.4%2025.3-2.6%2031.7%208.5%206.4%2011.1%202.6%2025.3-8.5%2031.7L825%20385.7c-11.1%206.4-25.3%202.6-31.7-8.5-6.4-11.1-2.6-25.3%208.5-31.7z%22%20fill%3D%22%23333333%22%20p-id%3D%22946%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M345.5%20339.6l243-129.2c11.9-6.3%2026.7-1.8%2033%2010.1%201.9%203.5%202.9%207.5%202.9%2011.5v497.2c0%2013.5-10.9%2024.4-24.4%2024.4-4.4%200-8.8-1.2-12.6-3.5L345.5%20604.9V339.6z%22%20fill%3D%22%23FFFFFF%22%20p-id%3D%22947%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M600%20778c-8.8%200-17.5-2.4-25.1-6.9L321.1%20618.8V324.9L577%20188.8c23.7-12.7%2053.4-3.6%2066%2020.2%203.7%207.1%205.7%2015%205.7%2022.9v497.2c0.1%2027-21.8%2048.9-48.7%2048.9zM369.9%20591.1L600%20729.2V232L369.9%20354.3v236.8z%22%20fill%3D%22%23333333%22%20p-id%3D%22948%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M206.1%20609.6h93v138.3c0%2013.5-10.9%2024.4-24.4%2024.4h-44.2c-13.5%200-24.4-10.9-24.4-24.4V609.6z%22%20fill%3D%22%23FFFFFF%22%20p-id%3D%22949%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M274.7%20796.7h-44.2c-26.9%200-48.8-21.9-48.8-48.8V585.2h141.8v162.7c0%2026.9-21.9%2048.8-48.8%2048.8zM230.5%20634v113.9h44.2V634h-44.2z%22%20fill%3D%22%23333333%22%20p-id%3D%22950%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
			}

			.menu-item-icon {
				background-size: 100%;
				argin-left: 15px;
				background-position: center top;
				background-repeat: no-repeat;
				float: left;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
			}
			.icon-OS-Checklist {
				width: 23px; height: 23px;
#				background-image: url('data:image/svg+xml,%3Csvg%20t%3D%221678432814343%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%221671%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M399.146667%20339.626667c-21.12%200-37.76%207.893333-49.92%2023.466666s-18.133333%2036.053333-18.133334%2061.013334c0%2024.533333%205.973333%2044.8%2017.706667%2060.373333%2011.733333%2015.573333%2028.16%2023.466667%2048.853333%2023.466667%2021.12%200%2037.546667-7.466667%2049.28-22.4%2011.733333-14.933333%2017.706667-34.986667%2017.706667-60.373334%200-26.453333-5.76-47.146667-17.066667-62.506666-11.52-15.36-27.52-23.04-48.426666-23.04z%22%20p-id%3D%221672%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M832%20106.666667H192C144.853333%20106.666667%20106.666667%20144.853333%20106.666667%20192v469.333333c0%2047.146667%2038.186667%2085.333333%2085.333333%2085.333334h213.333333l-42.666666%20106.666666h-74.666667c-17.706667%200-32%2014.293333-32%2032s14.293333%2032%2032%2032h448c17.706667%200%2032-14.293333%2032-32s-14.293333-32-32-32H661.333333l-42.666666-106.666666h213.333333c47.146667%200%2085.333333-38.186667%2085.333333-85.333334V192c0-47.146667-38.186667-85.333333-85.333333-85.333333zM396.8%20554.666667c-36.266667%200-65.706667-11.946667-88.32-35.626667-22.613333-23.893333-33.92-54.4-33.92-91.946667%200-39.68%2011.52-71.893333%2034.773333-96.853333%2023.04-24.96%2053.76-37.333333%2091.733334-37.333333%2036.053333%200%2065.28%2011.946667%2087.253333%2036.053333s33.066667%2055.04%2033.066667%2092.8c0%2039.466667-11.52%2071.466667-34.346667%2096C463.786667%20542.293333%20433.92%20554.666667%20396.8%20554.666667z%20m300.16-19.2c-17.28%2012.8-41.6%2019.2-73.386667%2019.2-29.013333%200-52.693333-4.693333-71.253333-14.08v-53.973334c20.266667%2016.853333%2043.52%2025.386667%2069.333333%2025.386667%2014.72%200%2025.813333-2.56%2033.066667-7.68%207.466667-5.12%2011.093333-11.52%2011.093333-19.413333%200-6.826667-2.986667-13.44-8.746666-19.413334s-21.333333-14.293333-46.506667-24.746666c-39.466667-16.853333-59.306667-41.173333-59.306667-73.173334%200-23.466667%208.96-41.813333%2026.88-54.826666s41.6-19.413333%2071.04-19.413334c24.746667%200%2045.44%203.2%2062.293334%209.6v50.56c-17.066667-11.52-36.906667-17.28-59.52-17.28-13.226667%200-23.893333%202.346667-31.786667%207.253334-7.893333%204.906667-11.946667%2011.306667-11.946667%2019.413333%200%206.613333%202.773333%2012.586667%208.106667%2018.133333%205.546667%205.546667%2018.986667%2013.013333%2040.32%2022.4%2025.173333%2010.88%2042.453333%2022.186667%2051.84%2034.133334s14.08%2026.24%2014.08%2042.88c0.213333%2023.893333-8.533333%2042.453333-25.6%2055.04z%22%20p-id%3D%221673%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
			}

			.icon-DB-Checklist {
				width: 21px; height: 21px;
#				background-image: url('data:image/svg+xml,%3Csvg%20t%3D%221678433408301%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%221719%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M511.850044%200.299912C229.332813%200.299912%200.299912%20107.568486%200%20239.929708v544.140584c0%20132.461193%20229.132871%20239.929708%20511.850044%20239.929708s511.850044-107.468515%20511.850044-239.929708V239.929708C1023.400176%20107.568486%20794.367275%200.299912%20511.850044%200.299912zM167.950796%20895.737577c-22.093527%200-39.988285-17.894757-39.988285-39.988285s17.894757-39.988285%2039.988285-39.988284%2039.988285%2017.894757%2039.988284%2039.988284-17.894757%2039.988285-39.988284%2039.988285z%20m791.768036-188.644733c-17.894757%2011.496632-37.489017%2022.193498-58.782778%2032.190569-104.969247%2049.18559-243.228742%2076.277653-389.08601%2076.277653s-284.116763-27.092063-389.08601-76.277653c-21.293762-9.997071-40.888021-20.693937-58.782779-32.190569v-79.176804c87.274431%2073.778385%20255.125256%20123.66377%20447.868789%20123.663771s360.594357-49.885385%20447.868788-123.663771v79.176804zM127.962511%20583.828956c0-22.093527%2017.894757-39.988285%2039.988285-39.988284s39.988285%2017.894757%2039.988284%2039.988284-17.894757%2039.988285-39.988284%2039.988285-39.988285-17.894757-39.988285-39.988285z%20m831.756321-148.156594c-17.894757%2011.496632-37.489017%2022.193498-58.782778%2032.190569-104.969247%2049.18559-243.228742%2076.277653-389.08601%2076.277653S227.733281%20517.048521%20122.764034%20467.862931c-21.293762-9.997071-40.888021-20.693937-58.782779-32.190569v-79.176804c87.274431%2073.778385%20255.125256%20123.66377%20447.868789%20123.66377s360.594357-49.885385%20447.868788-123.66377v79.176804z%22%20p-id%3D%221720%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
			}


			.icon-menu-down {
				width: 20px; height: 20px;
				background-size: 100%;
				background-position: center top;
				background-repeat: no-repeat;
				float: left;
				margin-right: 10px;
				background-image: url('data:image/svg+xml,%3Csvg%20t%3D%221678433012645%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%221117%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M483.072%20714.496l30.165333%2030.20799999%20415.957334-415.82933299a42.837333%2042.837333%200%200%200%201e-8-60.288%2042.538667%2042.538667%200%200%200-60.33066701-0.042667l-355.541333%20355.413333-355.242667-355.413333a42.496%2042.496%200%200%200-60.288%200%2042.837333%2042.837333%200%200%200-0.085333%2060.33066699l383.701333%20383.87200002%201.706667%201.74933299z%22%20fill%3D%22%233D3D3D%22%20p-id%3D%221118%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
			}

			.menu-back {
				width: 14px;
				height: 14px;
				background-size: 100%;
				margin-right: 2px
			}

			.the-headline {
				font:bold 20pt Courier New,Helvetica,sansserif;
				font-weight: 600;
				padding: 15px 0;
				text-align: center;
				display: flex;
				justify-content: space-around;
			}







			/* 复制 */
			.icon-copy {
				width: 20px; height: 20px;
				background-size: 100%;
				background-position: center top;
				background-repeat: no-repeat;
				float: left;
				margin-right: 10px;
				background-image: url('data:image/svg+xml,%3Csvg%20t%3D%221678947012049%22%20class%3D%22icon%22%20viewBox%3D%220%200%201024%201024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20p-id%3D%221000%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cpath%20d%3D%22M394.666667%20106.666667h448a74.666667%2074.666667%200%200%201%2074.666666%2074.666666v448a74.666667%2074.666667%200%200%201-74.666666%2074.666667H394.666667a74.666667%2074.666667%200%200%201-74.666667-74.666667V181.333333a74.666667%2074.666667%200%200%201%2074.666667-74.666666z%20m0%2064a10.666667%2010.666667%200%200%200-10.666667%2010.666666v448a10.666667%2010.666667%200%200%200%2010.666667%2010.666667h448a10.666667%2010.666667%200%200%200%2010.666666-10.666667V181.333333a10.666667%2010.666667%200%200%200-10.666666-10.666666H394.666667z%20m245.333333%20597.333333a32%2032%200%200%201%2064%200v74.666667a74.666667%2074.666667%200%200%201-74.666667%2074.666666H181.333333a74.666667%2074.666667%200%200%201-74.666666-74.666666V394.666667a74.666667%2074.666667%200%200%201%2074.666666-74.666667h74.666667a32%2032%200%200%201%200%2064h-74.666667a10.666667%2010.666667%200%200%200-10.666666%2010.666667v448a10.666667%2010.666667%200%200%200%2010.666666%2010.666666h448a10.666667%2010.666667%200%200%200%2010.666667-10.666666v-74.666667z%22%20fill%3D%22%23000000%22%20p-id%3D%221001%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
				opacity: 0.4;
			}

			.icon-copy:hover, .icon-copy:focus {
				opacity: 1;
			}

			.copied {
				margin:auto;
				position: relative;
				float: right;
				line-height: 24px;
				border-radius: 4px;
				color: #fff;
				cursor: pointer;
			}

			.the-copy {
				float: right;
				display: flex;
			}

			.detail-text-get {
				padding: 5px;
				font-size:12.5px;
				max-width: calc( 100% - 23px);
				width: calc( 100% - 23px);
				max-height:85vh;
				overflow:auto
			}
			#detail-text-copy-transfer {
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
			z-index: -10;
		    }


		/* 复制 dialog */
		.copy-hint {
			position: fixed;
			top: 25%;
			left: 50%;
			z-index: 99;
			width: 77px;
			min-height: 25px;
			padding: 22px;
			text-align: center;
			border-radius: 5px;
			box-shadow: 0 3px 10px rgba(0,0,0,.3);
		}
		.copy-hint span {
			display: inline-block;
			line-height: 24px;
			vertical-align: middle;
			overflow: hidden;
			word-wrap: break-word;
			word-break: break-all;
			font-size: 18px;
			color: #ffffff;
		}
		.copy-hint::after {
			content: "";
			display: inline-block;
			height: 48px;
			vertical-align: middle;
		}

		.copy-suc {
			display:none;
			background-color: rgba(47,183,70,.95);
		}
		@-webkit-keyframes copy-success {
			0% {
				width:0
			}
			100% {
				width:10px
			}
		}

		.detail_text_header{
			white-space: pre-wrap;
			font-size:13px;
		}
		.gotodisk {
			text-decoration: none;
			font-weight: bold;
			color: #F17B15;
		}
		.gotodisk:hover {
			color: #ff7600;
		}
		</style>


		<script type="text/javascript">
		window.onload = function () {
			var content = document.getElementById("foldtable");
			content.onclick = function() { onTableClick() };

			function onTableClick(){
				var normal_list = document.getElementsByClassName("NORMAL");
				if (normal_list[0].style.display == "" ||  normal_list[0].style.display == "none") {
					for(var i=0; i < normal_list.length; i++){
						normal_list[i].style.display = "table-row";
						content.innerHTML = "<a href='#the_top' class='table_foldbtn'>折叠</a>";
					}
				} else if (normal_list[0].style.display == "table-row"){
					for(var i=0; i < normal_list.length; i++){
						normal_list[i].style.display = "none";
						content.innerHTML = "展开";
					}
				}
			}
		}




		function copyText(text_id, textarea_id) {
			var text = document.getElementById(text_id).innerText;
			var input = document.getElementById(textarea_id);
			input.value = text;
			input.select();
			document.execCommand("copy");

			var obj = document.getElementById("copy-success");
			obj.style.display = "block";
			setTimeout(function(){
				obj.style.display = "none";
			},500);
		}

        function changeLink(aim) {
            var newUrl = aim;
            document.getElementById("backLink").href = newUrl;

        }



		</script>

		</head>
		<body>' >$file_output
	}

create_a_head() {
	echo -e "
	<head>
	<style>
	.menu-item>input#menu-OS-Checklist:checked~.menu-content {
		height: calc("${#os_dict[@]}" * 40px);
	}

	.menu-item>input#menu-DB-Checklist:checked~.menu-content {
		height: calc("$((${#db_dict[@]} + 1))" * 40px);
	}
	</style>
	</head>">>$file_output
}


create_a_menu_head() {
	# <label for="menu-btn"><i class="icon-menu-down menu-back"></i></label>
	echo -e '
	<div class="main-content">
	<div class="menu-box">
	<input type="checkbox" id="menu-btn">

	<div class="menu">
	<div class="menu-title">Wincloud</div>' >>$file_output
}

create_a_menu_end() {
	# main-content 结束
	# menu-box 结束
	echo -e "
	</div>
	</div>">>$file_output
}

create_one_level_menu_item() {
	db_or_os=`echo $1 | sed s/[[:space:]]/-/g`
	echo -e "
	<div class="menu-item">
	<input type="checkbox" id="menu-$db_or_os">
	<label for="menu-$db_or_os">
	<i class='icon-$db_or_os menu-item-icon'></i>
	<span class="one-level-span">$1</span>
	<i class="icon-menu-down menu-item-last"></i>
	</label>
	<div class="menu-content">
	" >>$file_output
}

create_two_level_menu_item() {
	echo -e "<span><a href='#$1' class='menu_href'>$2</a></span>">>$file_output
}

create_one_level_menu_item_end() {
	echo -e '</div></div>'>>$file_output
}

create_a_content_box() {
	echo -e '<main class="content-box"><div id="the_top"></div>'>>$file_output
}

create_main_content_end() {
	echo -e "</main></div>" >>$file_output
}


create_html_end(){
	echo -e "</body></html>" >>$file_output
}

create_a_headline() {
	echo -e "
	<div class='the-headline' style='font-size: 38px;'>wincloud 巡检报告</div>
	<div class='the-headline' style='font-size: 18px;'>巡检时间: `date "+%Y-%m-%d %H:%M:%S"`</div>">>$file_output
}

create_html_head2(){
  html_head2_content=`echo "$1" | sed s/[[:space:]]/-/g`
	echo -e "<h2 id="$html_head2_content">$1</h2>">>$file_output
}

create_html_head3(){
 echo -e "<h3 id="$1">$2</h3>">>$file_output
}


create_html(){
	echo -e "<h3 id="$1">$2</h3>">>$file_output
}

create_html_section(){
	echo -e "<section id="$1"></section>">>$file_output
}

create_table_head(){
	echo -e "<table border="1" id="$1">">>$file_output
}

create_table_head_2(){
	echo -e "<table style='width: 94%' border="1" id="$1">">>$file_output
}

create_div_head(){
	echo -e "<div width="94%" id="$2">"
}

create_table_end(){
	echo -e "</table></br>">>$file_output
}

create_table_end_no_br(){
	echo -e "</table>">>$file_output
}

create_div_end(){
	echo -e "</div></br>"
}

create_td(){
	td_str=`echo $1 | awk 'BEGIN{FS="|"}''{i=1; while(i<=NF) {print "<td>"$i"</td>";i++}}'`
}

create_two_td(){
	td_str='<td>'"$1"'</td><td><div class="detail_text_header">'"$2"'</div></td>'
}

create_five_td(){
	td_str="<td width="25px" style='text-align: center'>"$1"</td><td width="60px" style='text-align: center'>$2</td><td width="90px" style='text-align: center'>"$3"</td><td width="280px">"$4"</td><td style='text-align: center'>"$5"</td>"
}

create_five_th(){
	td_str="<th style='background: #F88825'>"$1"</th><th style='background: #F88825'>"$2"</th><th style='background: #F88825'>"$3"</th><th style='background: #F88825'>"$4"</th><th style='background: #F88825'>"$5"</th>"
}

create_td_red(){
	td_str=`echo $1 | awk 'BEGIN{FS="|"}''{i=1; while(i<=NF) {print "<td><font color='#c70303'><b>"$i"</b></font></td>";i++}}'`
}

# create_td_view(){
create_href(){
	echo -e "<a href='#$1'>View</a>"
}

create_th(){
	th_str=`echo $1|awk 'BEGIN{FS="|"}''{i=1; while(i<=NF) {print "<th>"$i"</th>";i++}}'`
}

create_tr1(){
	create_td "$1"
	echo -e "<tr>$td_str</tr>" >>$file_output
}


create_tr2(){
	create_two_td "$1" "$2"
	echo -e "<tr>$td_str</tr>" >>$file_output
}

# create_special_tr2() {
#   echo -e "<tr>"<td>"$1"</td><td>"$2"</td>"</tr>" >>$file_output
# }

create_tr3_h(){
	create_five_th "$1" "$2" "$3" "$4" "$5"
	echo -e "<tr style='height: 28px'>$td_str</tr>" >>$file_output
}

create_tr5(){
	create_five_td "$1" "$2" "$3" "$4" "$(create_href "$5")"
	echo -e "<tr class="$2">$td_str</tr>" >>$file_output
}

create_tr5_color(){
	if [[ "$2" = "FATAL" ]]; then
		create_five_td "$1" "<div style='color: red;font-weight: bold'>$2</div>" "$3" "$4" "$(create_href "$5")"
	elif [[ "$2" = "ERROR" ]]; then
		create_five_td "$1" "<div style='color: orange;font-weight: bold'>$2</div>" "$3" "$4" "$(create_href "$5")"
	elif [[ "$2" = "WARNING" ]]; then
		create_five_td "$1" "<div style='color: orange'>$2</div>" "$3" "$4" "$(create_href "$5")"
	elif [[ "$2" = "UNKOWN" ]]; then
		create_five_td "$1" "<div style='color: grey'>$2</div>" "$3" "$4" "$(create_href "$5")"
	else
		create_five_td "$1" "<div style='color: green'>$2</div>" "$3" "$4" "$(create_href "$5")"
	fi
	echo -e "<tr class="$2">$td_str</tr>" >>$file_output
}

create_td_red(){
	create_five_td "$1"
	echo -e "<tr class="$2">$td_str</tr>" >>$file_output
}


create_tr_h(){
	create_th "$1"
	echo -e "<tr>
	$th_str
	</tr>" >>$file_output
}

create_tr_detail() {
	if [ $(wc -l < "$1") -gt 1000 ]; then
		the_detail=$(head -n 1000 "$1"; echo "...以下略")
	else
		the_detail=$(cat "$1")
	fi

	#   the_detail=`cat $1 | head -n 1000`
	#   if [ `echo "$the_detail" | wc -l` -gt 10 ];then
	#     detail_btn_display='inline'
	#   else
	#     detail_btn_display='none'
	#   fi
	echo -e "<tr><td><div class='detail_wrapper'>
	<input type='checkbox' class='detail_exp' id='detail_exp_$2'>
	<div class='detail_text'><button title='Copy' class='icon-copy copied' type="button" onclick=""'"'copyText(''"'"detail-text-get-$2"'"'',''"'"detail-text-copy-transfer"'"'')'"'"'>'"<textarea id="detail-text-copy-transfer"></textarea><div class='copy-hint copy-suc' id='copy-success'><span rel="con">复制成功</span></div></button><div id='detail-text-get-$2' class='detail-text-get'>$the_detail</div></div>
	</div></td></tr>">>$file_output
}

# 建议
create_tr_suggest() {
	echo -e "<tr><td><div class='suggest'>"$1"</div></td></tr>">>$file_output
}

create_suggestion() {
	echo -e "
	<div class='panel panel-warning'>
	<div class='panel-heading'>
	<h5 class='panel-title' id="$1-suggestion">
	<div class='icon-suggestion'></div>
	Suggestion
	</h5>
	</div>
	<div class='panel-body'>
	`echo -e "$2"`
	</div>
	</div></br>">>$file_output
}

create_a_top(){
	echo -e "<hr><a href='#'>Top</a>" >>$file_output
}

create_a_hr() {
	echo -e "<hr style='opacity: 66%'>" >>$file_output
}

create_scroll_to_top() {
	echo -e "<a href="#db_server" class="scroll_to_top"></a>">>$file_output
}
